<template>
  <div id="pc_home_notice">
    <div class="notice_close">
      <img @click="closeNotice" src="@/assets/images/pc_black/auth/close.png" />
    </div>

    <div class="notice_title" @click="gotoNoticeItem(noticeData.id)">
      {{ noticeData.title }}
    </div>

    <div
      class="notice_content"
      v-html="content"
      @click="gotoNoticeItem(noticeData.id)"
    ></div>

    <ul class="notice_pag" v-if="total > 1">
      <li
        :class="{ active_pag: index + 1 === currentPage }"
        v-for="(item, index) in total"
        :key="index"
        @click="changePage(index)"
      ></li>
    </ul>
  </div>
</template>

<script>
// --- api ---
import { noticeInfoApi } from "@/api";
// --- utils ---
import { iscode, escapeHTML } from "@/utils";

export default {
  name: "PcHomeNotice",
  data() {
    return {
      // 公告数据
      noticeData: {},
      // 总条数
      total: 0,
      // 当前页码
      currentPage: 1,
      // 每页条数
      pagesize: 1,
      // 是否能够点击切换
      isChange: true,
    };
  },
  computed: {
    content() {
      return escapeHTML(this.noticeData.content ?? "");
    },
  },
  methods: {
    // ------ async ------
    // 获取公告信息
    async noticeInfo() {
      this.isChange = false;
      let res = await noticeInfoApi({
        page: this.currentPage,
        pagesize: this.pagesize,
      });
      if (iscode(res)) {
        this.total = res.result.count;
        this.noticeData = res.result.list[0] || {};
        this.isChange = true;
      }
    },

    // ------ common ------
    // 切换页码
    changePage(pageIndex) {
      // 避免重复点击发送请求
      if (pageIndex + 1 === this.currentPage) {
        return;
      } else if (!this.isChange) {
        return;
      }
      this.currentPage = pageIndex + 1;
      this.noticeInfo();
    },
    // 关闭弹窗
    closeNotice() {
      this.$emit("hiddenNotice");
      window.localStorage.setItem(
        "pc_oldNoticeData",
        JSON.stringify(this.noticeData)
      );
    },

    // ------ goto ------
    // goto notice item page
    gotoNoticeItem(id) {
      this.$router.push({
        path: "/noticeItem",
        query: {
          id,
        },
      });
    },
  },
  created() {
    this.noticeInfo();
  },
};
</script>

<style lang="less" scoped>
#pc_home_notice {
  .notice_close {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;

    img {
      display: block;
      width: 16px;
      height: 16px;
      cursor: pointer;
      transform: translateY(-10px);
    }
  }

  // Notice Title
  .notice_title {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 20px;
    text-align: center;
  }

  // Notice Content
  .notice_content {
    width: 100%;
    height: 220px;
    font-size: 16px;
    line-height: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-top: 20px;
    overflow: auto;
    word-break: break-all;
    padding: 0 5px;
    margin-bottom: 60px;
  }

  // Pagination
  .notice_pag {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;

    li {
      list-style: none;
      width: 11px;
      height: 11px;
      margin: 0 4px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
    }

    .active_pag {
      transform: scale(1.3);
      box-shadow: white 0px 0px 2px;
      background: #00ffb0;
    }
  }

  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 2px;
    border-radius: 3px;
    display: block;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #a0a0a0;
    height: 10px;
  }
}
</style>
